import React, { useState } from 'react';
import { Box, MainButton, makeToast, NumberTextBox, Text } from '@nova-hf/ui';
import { useMobileServicesLazyQuery } from 'typings/graphql';
import { inject, observer } from 'mobx-react';
import Steps from 'beta/store/steps';
import MobileServiceList from 'beta/containers/service-list/MobileServiceList';
import { useTranslation } from 'beta/utils/i18n';
import { parseMainColor } from 'beta/utils/typeGuards';

type ChooseNumberProps = {
  color?: string;
  steps: Steps;
  sendPhoneNumber: (number: string) => void;
  isNovaNumber: (res: boolean) => void;
};

const ChooseNumber = ({ steps, sendPhoneNumber, isNovaNumber, color }: ChooseNumberProps) => {
  const COLOR = parseMainColor(color ?? 'pink', 'pink');
  const { t } = useTranslation('alltSaman');
  const [status, setStatus] = useState('');
  const [message, setMessage] = useState('');
  const [number, setNumber] = useState('');
  const [filter, setFilter] = useState('');
  const [getNovaSubscription] = useMobileServicesLazyQuery({
    onCompleted(data) {
      if (data?.mobileServices?.services?.length) {
        isNovaNumber(true);
        setStatus('success');
        setMessage(t('alltSaman.isNova'));
      } else {
        isNovaNumber(false);
        setStatus('warning');
        setMessage(t('alltSaman.isNotNova'));
      }
    },
    onError(error) {
      isNovaNumber(false);
      setStatus('warning');
      setMessage(t('alltSaman.isNotNova') + ': ' + error.message);
    },
  });
  const onChangeNumber = (newNumber: string) => {
    setFilter(newNumber);
    if (newNumber.length === 7) {
      setNumber(newNumber);
      try {
        getNovaSubscription({
          variables: {
            input: {
              phoneNumber: newNumber,
            },
          },
        });
      } catch (error) {
        if (error instanceof Error) makeToast.danger(error.message, '');
      }
    } else {
      return null;
    }
  };

  const onNext = () => {
    sendPhoneNumber(number);
    steps?.next();
  };

  return (
    <Box>
      <Text variant="h4">{t('alltSaman.addPhoneNumber')}</Text>
      <Text>{t('alltSaman.typeNumber')}</Text>
      <NumberTextBox
        name="msisdn"
        label={t('alltSaman.writeNumber')}
        autoComplete="false"
        errorType="msisdn"
        status={status}
        message={message}
        required
        length={7}
        onChange={(e: React.FormEvent<HTMLInputElement>) => onChangeNumber(e.currentTarget.value)}
      />
      <Box marginTop={10}>
        <MobileServiceList filter={filter} />
      </Box>
      <Box marginLeft="auto" marginTop={10} width="4/12">
        <MainButton
          colorScheme={COLOR}
          dottedShadow="none"
          text={t('alltSaman.go')}
          isDisabled={number.length !== 7}
          onClick={() => onNext()}
        />
      </Box>
    </Box>
  );
};

export default inject('steps')(observer(ChooseNumber));